<template>
	<view class="conent">
		<u-navbar :is-back="false" :safeAreaInsetTop="false" height="180rpx">
		</u-navbar>
		<view class="conent_box">
			<u-swiper :list="swiperList" imgMode="widthFix" height="200" previousMargin="10" nextMargin="10" circular indicator
				indicatorMode="dot" bgColor="#F8F8F8"></u-swiper>
			<view class="environment">
				<u--image :src="guaranteeImage" width="100%" height="27"></u--image>
			</view>
			<view style="width: 200rpx;margin: auto;margin-top: 40rpx;">
				<u--image :src="baseImage" width="100%" height="30"></u--image>
				<!-- <u--text text="基地优选" bold size="20" color="#365958" lineHeight="40" align="center" customStyle="z-index:9;"></u--text>
				<view
					style="position: absolute;top: 40rpx;left: 30rpx; width: 100rpx;border: 16rpx solid #fff239;border-radius: 40rpx 0; background-color: #FFEC45;">
				</view> -->
			</view>
			<view class="baseList">
				<!-- <u-list enableFlex @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in goodsList" :key="index">
						<u-image :src="item.goodsImage" width="320rpx" height="340rpx" radius="20rpx"></u-image>
						<view class="card">
							<u--text :text="item.goodsName" bold size="16" color="#000" lineHeight="30"></u--text>
							<u--text :text="item.goodsDesc" size="12" lines="1" color="#B0B0B0"
								lineHeight="20"></u--text>
							<u-row customStyle="margin-top: 10rpx;">
								<u-col span="6">
									<u--text :text="item.goodsSpecList[0].preferentialPrice" mode="price" size="14" bold
										color="#94700A"></u--text>
								</u-col>
								<u-col span="5">
									<u--text :text="item.goodsSpecList[0].originalPrice" mode="price" size="12"
										decoration="line-through" color="#B0B0B0"></u--text>
								</u-col>
								<u-col span="1">
									<u-icon name="plus-circle-fill" color="#94700A"
										@click="addGoods(item.goodsSpecList[0].specId)"></u-icon>
								</u-col>
							</u-row>
						</view>
					</u-list-item>
				</u-list> -->
				<view class="item" v-for="(item, index) in goodsList" :key="index" @click="getGoodInfor(item)">
					<u-image :src="item.goodsImage" width="320rpx" height="340rpx" radius="20rpx"></u-image>
					<view class="card">
						<u--text :text="item.goodsName" bold size="16" color="#000" lineHeight="30"></u--text>
						<u--text :text="item.goodsDesc" size="12" lines="1" color="#B0B0B0" lineHeight="20"></u--text>
						<u-row customStyle="margin-top: 10rpx;">
							<u-col span="6">
								<u--text :text="item.goodsSpecList[0].preferentialPrice" mode="price" size="14" bold
									color="#94700A"></u--text>
							</u-col>
							<u-col span="5">
								<u--text :text="item.goodsSpecList[0].originalPrice" mode="price" size="12"
									decoration="line-through" color="#B0B0B0"></u--text>
							</u-col>
							<u-col span="1">
								<u-icon name="plus-circle-fill" color="#94700A" @tap.stop="getGood(item)"></u-icon>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="goodsSpecShow" @open="open" @close="close" customStyle="border-radius:40rpx">
			<view class="parameter">
				<u-row>
					<u-col span="6">
						<u--image :src="goodsInfor.goodsSpecList[kind].specImage" width="140px" height="140px"
							radius="20"></u--image>
					</u-col>
					<u-col span="6">
						<u--text :text="goodsInfor.goodsName" size="16" bold lineHeight="25" color="#000"></u--text>
						<u--text :text="goodsInfor.goodsDesc" size="14" lineHeight="25" color="#333"></u--text>
						<u--text :text="goodsInfor.goodsSpecList[kind].preferentialPrice" mode="price" size="15"
							lineHeight="25" bold color="#FF7643"></u--text>
						<u--text :text="'原价￥'+goodsInfor.goodsSpecList[kind].originalPrice" size="12" lineHeight="25"
							decoration="line-through" color="#8991A4"></u--text>
					</u-col>
				</u-row>
				<view class="specification">
					<u--text text="请选择商品规格" size="14" bold lineHeight="25" color="#333"></u--text>
					<view class="kind">
						<u-grid :border="false" @click="chooseSpecification">
							<u-grid-item :bgColor="kind==index?'#07BFA5':'#F8F8F8'"
								:customStyle="{'border-radius':'20rpx','color':index==kind?'#fff':'#333'}"
								v-for="(item,index) in goodsInfor.goodsSpecList" :key="index">
								<text class="grid-text">{{item.specName}}</text>
							</u-grid-item>
						</u-grid>
						<u-divider></u-divider>
						<view style="display: flex;justify-content: space-between;">
							<view>
								<text style="margin-right: 20rpx;color: #333;">数量</text>
								<text style="color: #666666;">{{goodsInfor.goodsSpecList[kind].inventory}}</text>
							</view>
							<u-number-box v-model="quantity" :max="goodsInfor.goodsSpecList[kind].inventory" integer
								@change="quantityChange"></u-number-box>
						</view>
					</view>
				</view>
				<u-row>
					<u-col span="4">
						<u-button text="加入购物车" @click="addGoods(goodsInfor.goodsSpecList[kind].specId)"
							customStyle="margin-top:30rpx; border:none;color:#fff;background:#07BFA5;border-radius:16rpx;"></u-button>
					</u-col>
					<u-col span="8">
						<u-button text="立即购买" @click="payGoods"
							customStyle="margin-top:30rpx; border:none;color:#fff;background:#FFB057;border-radius:16rpx;"></u-button>
					</u-col>
				</u-row>
			</view>
		</u-popup>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import router from '@/api/router';
	import {
		banner
	} from "@/api/pages/events.js"
	import {
		goods,
		cart,
		addCart,
		updateCart,
		deleteCart,
		pay
	} from "@/api/pages/goods.js"
	// import {
	// 	list
	// } from "@/api/pages/address.js"
	const swiperList = ref([])
	const guaranteeImage = ref("https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/guarantee.png")
	const baseImage = ref("https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/base.png")
	const goodsList = ref([])
	const goodsSpecList = ref([])
	const goodsSpecShow = ref(false)
	const goodsInfor = ref([])
	const kind = ref(0)
	const quantity = ref(1)
	const payForm = ref({
		addressId: '',
		items: []
	})
	const address = ref({})
	onMounted(() => {
		getBanner(2)
		getGoods()
	})
	const getBanner = async (i) => {
		const res = await banner(i).then()
		swiperList.value = res.result
	}
	const getGoods = async () => {
		const res = await goods().then()
		goodsList.value = res.result
		goodsInfor.value = goodsList.value[0]
	}
	const getGoodInfor = (good) => {
		router.navigateTo({
			url: '/pageB/order/detail?goodsId=' + good.goodsId
		})
		// event.stopPropagation()
	}
	const getGood = (good) => {
		goodsSpecShow.value = true
		kind.value = 0
		goodsInfor.value = good
		// event.stopPropagation()
		// router.navigateTo({
		// 	url: '/pageB/order/detail?good=' + JSON.stringify(good)
		// })
	}
	const chooseSpecification = (name) => {
		kind.value = name
		console.log(name);
	}
	const quantityChange = () => {
		console.log("quantityChange")
	}
	const open = () => {
		console.log("open")
	}
	const close = () => {
		goodsSpecShow.value = false
		console.log("close")
	}
	const addGoods = async (specId) => {
		console.log("添加购物车==", specId);
		// goodsSpecList.value = list
		const cartInfor = {
			'specId': specId,
			"quantity": 1
		}
		const res = await addCart(cartInfor).then(e => {
			uni.showToast({
				title: e.message,
				icon: 'none'
			})
			close()
		})
	}
	const payGoods = () => {
		console.log("payGoods===");
		payForm.value = {
			items: [{
				// goodsDesc: goodsInfor.value.goodsDesc,
				goodsId: goodsInfor.value.goodsId,
				goodsImage: goodsInfor.value.goodsImage,
				goodsName: goodsInfor.value.goodsName,
				price: goodsInfor.value.goodsSpecList[kind.value].preferentialPrice,
				specId: goodsInfor.value.goodsSpecList[kind.value].specId,
				specImage: goodsInfor.value.goodsSpecList[kind.value].specImage,
				specName: goodsInfor.value.goodsSpecList[kind.value].specName,
				quantity: quantity.value
			}]
		}
		router.navigateTo({
			url: '/pageB/order/confirm?items=' + JSON.stringify(payForm.value.items)
		})
		close()
		// getAddressList({
		// 	pageNo: 1,
		// 	pageSize: 99
		// })
	}
	// const getAddressList = async (form) => {
	// const res = await list(form).then()
	// if (!res.result.records.length > 0) {
	// 	close()
	// 	uni.showModal({
	// 		title: '提示',
	// 		content: '地址列表为空，需要添加有效地址',
	// 		success: function(res) {
	// 			if (res.confirm) {
	// 				router.navigateTo({
	// 					url: "/pageD/feature/address"
	// 				})
	// 				// console.log('确认');
	// 			} else if (res.cancel) {
	// 				console.log('取消');
	// 			}
	// 		}
	// 	})
	// 	return
	// }
	// address.value = res.result.records[0]
	// payForm.value = {
	// 	addressId: address.value.id,
	// 	items: [{
	// 		specId: goodsInfor.value.goodsSpecList[kind.value].specId,
	// 		specPrice: goodsInfor.value.goodsSpecList[kind.value].preferentialPrice * quantity
	// 			.value,
	// 		specQuantity: quantity.value
	// 	}]
	// }
	// console.log(goodsInfor.value, kind.value, address.value, payForm.value);
	// payOrder(payForm.value)
	// }
	// const payOrder = async (form) => {
	// 	const res = await pay(form).then()
	// 	if (res.code == 200) {
	// 		uni.requestPayment({
	// 			provider: 'wxpay', // 服务提提供商
	// 			appId: res.result.appId,
	// 			timeStamp: JSON.stringify(res.result.timeStamp), // 时间戳
	// 			nonceStr: res.result.nonceStr, // 随机字符串
	// 			package: res.result.prepayId,
	// 			signType: 'SHA256withRSA', // 签名算法
	// 			paySign: res.result.sign, // 签名

	// 			success: function(ess) {
	// 				console.log('支付成功', ess);
	// 				// 业务逻辑。。。
	// 				// router.navigateTo({
	// 				// 	url: '/pageB/order/succeed',
	// 				// })
	// 				router.navigateTo({
	// 					url: '/pageB/order/succeed?payForm=' + JSON.stringify({
	// 						orderId: res.result.orderId,
	// 						// priceAll: priceAll.value,
	// 						// address: address.value,
	// 						// items: payForm.value.items
	// 					})
	// 				})
	// 			},
	// 			fail: function(err) {
	// 				console.log('支付失败', err);
	// 			}
	// 		})
	// 	}
	// }
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 180rpx;
		background-color: #F8F8F8;

		.environment {
			padding: 20rpx;
		}

		.baseList {
			padding: 20rpx 10rpx 100rpx 10rpx;
			display: flex;
			justify-items: center;
			flex-wrap: wrap;

			.item {
				// width: 50%;
				height: 420rpx;
				padding: 20rpx;
				position: relative;

				.card {
					position: absolute;
					top: 260rpx;
					left: 20rpx;
					width: 280rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 0.5);
					/* 半透明背景 */
					backdrop-filter: blur(10px);
					/* 背景模糊 */
				}
			}
		}

	}

	.parameter {
		padding: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;

		.specification {
			padding: 20rpx;

			.kind {
				margin-top: 20rpx;
			}
		}
	}
</style>